<!--
    TODO 增加读取状态
-->
<template>
  <div
    class="ivu-card ivu-card-bordered ivu-card-dis-hover select-list"
    :class="{'select-list-button':!select}"
  >
    <div
      class="ivu-card-head"
      v-if="title"
    >
      <Icon
        v-if="titleIcon"
        :type="titleIcon"
      ></Icon>
        <div v-html="title"></div>
        </div>
        <div class="ivu-card-body select-list-body">
          <div
            class="search-line"
            v-if="hasFilter"
          >
            <searchInput @trigger="searchData"></searchInput>
        </div>
        <div
          class="spin-wrapper"
          v-show="loading"
        >
          <Spin
            size="large"
            fix
          ></Spin>
            </div>
            <div
              class="list-wrapper"
              v-if="tableData && tableData.length"
            >
              <scrollBar
                :vertical="true"
                :open="open"
              >
                <div>
                  <div
                    class="list-item"
                    v-for="(item,index) in tableData"
                    :class="rowClass(index)"
                    :key="item.id"
                    @click="selectRow(index)"
                  >
                    <slot
                      name="option"
                      :item="item"
                      :index="index"
                    >
                      {{item.name}}
                      </slot>
                </div>
                </div>
                </scrollBar>
                </div>
                <div
                  class="center-container center-container-full"
                  v-else
                >
                  暂无数据
                  </div>
                  <div
                    class="page-line"
                    v-if="hasPage"
                  >
                    <Page
                      :total="data.pageCount"
                      @on-change="fetchPage"
                      size="small"
                    ></Page>
                      </div>
                      </div>
                      </div>
</template>

<script>
import scrollBar from '@/element/scrollbar';
import searchInput from '@/element/searchInput';
import $ from '@/common';
export default {
	name: 'SelectPanel',
	props: {
		loading: {
			default: false,
		},
		hasCheck: {
			default: false,
		},
		hasAction: {
			default: false,
		},
		hasPage: {
			default: false,
		},
		hasFilter: {
			default: false,
		},
		title: {},
		titleIcon: {},
		model: {},
		//启用选择状态
		select: {
			default: true,
		},
		localFilter: {
			default: false,
		},
		data: {
			default() {
				return [];
			},
		},
		open: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		tableData() {
			return this.hasPage ? this.data.data : this.data;
		},
	},
	data() {
		return {
			tableModel: {},
			selectIndex: null,
			value: null,
			listStatus: [],
		};
	},
	watch: {
		selectIndex(v) {
			this.value = this.data[v] && this.data[v].id;
			this.$emit('selectChange', v);
			this.$emit('input', this.value);
		},
		data() {
			this.clearSelect();
		},
	},
	methods: {
		selectRow(index) {
			if (this.select) {
				this.selectIndex = index;
			}
			this.$emit('select', index);
		},
		rowClass(index) {
			return index === this.selectIndex ? 'active' : '';
		},
		fetchPage(page) {
			this.$emit('changePage', page);
		},
		searchData(key) {
			this.$emit('searchData', key);
			if (this.localFilter) {
				this.keyFilter(key);
			}
		},
		keyFilter(key) {
			key = $.trim(key);
			if (!key || !key.length) {
				//this.
			}
		},
		//清空选择项
		clearSelect() {
			this.selectIndex = null;
		},
	},
	created() {
		this.$set(this, 'listStatus', []);
	},
	components: {
		searchInput,
		scrollBar,
	},
};
</script>
<style lang="less">
.ivu-card-head {
	.ivu-icon {
		margin-right: 2px;
	}
	div {
		display: inline;
	}
}
.select-list {
	.scrollbar_bar.is-vertical {
		right: -8px;
	}
}
.select-list-button {
	.list-item {
		cursor: pointer;
		&:active {
			background: #f1f1f1;
		}
		&:last-child {
			border-bottom: 1px solid #e9eaec;
		}
	}
}
</style>

